<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <link rel="icon" href="/web页面/logo3.png" type="image/png">

    <meta charset="UTF-8">
    <script src="vue.global.js"></script>
    <script src="axios.min.js"></script>
    <title>登录</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background:url("/web页面/R-C.jpg");
            background-size:cover;

            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        a {
            text-decoration: none; /* 移除下划线 */
            color: black; /* 设置默认颜色为黑色 */
        }

        #app {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 300px;
        }
        h3 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button.login {
            background-color: #007bff;
            color: white;
        }
        button.login:hover {
            background-color: #0056b3;
        }
        button.register {
            background-color: #c3e3cc;
            color: white;
            font-size: 14px;
            margin-top: 10px;
        }
        button.register:hover {
            background-color: #218838;
        }
    </style>
</head>

<body>
<div id="app">
    <h3>用户登录</h3>
    <div>
        <label for="email">邮箱</label>
        <input type="text" id="email" name="email">
    </div>
    <div>
        <label for="password">密码</label>
        <input type="password" id="password" name="password">
    </div>
    <button v-on:click="login" class="login">登录</button>
    <button  class="register"> <a href="http://127.0.0.1:8080/registration.html">还没有账号？注册</a></button>
</div>
</body>

<script>
    const app = {
        data() {
            return {};
        },
        methods: {
            login: function () {
                console.log("用户开始登录");
                axios({
                    method: 'post',
                    url: '/login',
                    data: {
                        email: document.getElementById("email").value,
                        password: document.getElementById("password").value,
                    }
                }).then((response) => {
                    if (response.data === 'ok') {
                        alert("登录成功");

                        window.location.href = '/home.html'
                    } else {
                        alert("登录失败" + response.data);
                    }
                });
            }

        },
        mounted() {
            console.log("vue启动成功");
        },
    }
    Vue.createApp(app).mount("#app");
</script>
</html>
